<template>
    <view class="body-view1">
        <!--导航和状态栏-->
        <view class="state-navigation">
            <view class="slim_header_navigation d-flex a-center j-center">
                <view class="left_box" @tap="goBack">
                    <image src="/static/center/back.png" class="back"></image>
                </view>
                <view class="title">我的订单</view>
                <view class="right_box">
                    <!-- <image src="/static/center/dian.png" class="dian"></image> -->
                </view>
            </view>
        </view>
        <!-- 顶部位置占位 -->

        <view class="content1" :style="{ top: `calc(100rpx + ${systemInfo.statusBarHeight}px)` }">
            <view
                class="nodata"
                v-show="
                    transactionData.list == null ||
                    transactionData.list.length < 1
                "
            >
                <image class="nodata-img" src="/static/img/nodata.png" alt="" />

                <view class="text">竟然什么都没有~</view>
            </view>

            <view style="width:750rpx;height:20rpx;"></view>

            <pullScroolView
                class="scroll"
                ref="scroll"
                :back-top="false"
                :pullDown="refresh"
                :pullUp="scrolltolower"
            >
                <!-- <scroll-view
			:scroll-top="scrollTop" 
			refresher-background="#F5F5F5"
			:upper-threshold="40"
			:refresher-enabled="true"
			:refresher-threshold="100"
			:refresher-triggered="triggered"
			@refresherrefresh="refresh" 
			
			@scrolltolower="scrolltolower"
			class="scroll-view" 
			scroll-y="true"> -->
                <!--无数据显示页面-->

                <!-- <view class="nodata-v d-flex a-center j-center" v-if="transactionData.list==null||transactionData.list.length<1">
				<image style="width: 200rpx;height: 250rpx;" src="../../static/img/nodata.png"></image>
			</view> -->

                <template
                    v-for="(item, index) in transactionData.list"
                    :key="index"
                >
                    <!-- <view class="date-count" v-if="isFirst(index)">
					<view class="date">{{moment(item.createTime, "YYYY-MM-DD HH:mm:ss").format('YYYY年MM月')}}</view>
					<view class="count d-flex a-center">
						<view class="month">月收入：¥{{centToYuan(item.incomeTotal)}}</view>
						<view class="refund">退款：¥{{centToYuan(item.refundTotal)}}</view>
						<view class="reflect">提现：¥{{centToYuan(item.withdrawTotal)}}</view>
					</view>
				</view> -->
                    <view class="transaction-month">
                        <view class="transaction-row d-flex a-center">
                            <view class="img-v d-flex a-center j-center">
                                <image
                                    class="img"
                                    :src="
                                        transactionImg[isPositive(item.slimType)?0:1]
                                    "
                                ></image>
                            </view>
                            <view class="describe-date d-flex a-center">
                                <view class="count">
                                    <!--收入-->
                                    <view class="describe">{{
                                        item.note
                                    }}</view>

                                    <view class="date">{{
                                        moment(
                                            item.createTime,
                                            "YYYY-MM-DD HH:mm:ss"
                                        ).format("MM/DD HH:mm")
                                    }}</view>
                                </view>
                            </view>
                            <view
                                v-if="isPositive(item.slimType)"
                                class="amount"
                            >
                                <view class="amount-number"
                                    >+{{ centToYuan(item.totalAmt) }}</view
                                >
                                <!--入账状态-->
                                <!-- <view v-if="item.type=='1'&&item.status=='1'" class="amount-state">待结算</view> -->
                            </view>

                            <view
                                v-if="!isPositive(item.slimType)"
                                class="amount d-flex d-c a-center"
                                style="color: #333;">
                                -{{ centToYuan(item.totalAmt) }}
                                <view v-if="item.payStatus===11" class="amount-state" style="margin-top:5rpx;">已退款</view>
                                
                            </view>
                            <!-- <view v-if="item.type=='3'" class="amount">
							<view class="amount-number" style="color: #333333;">{{centToYuan(item.amount)}}</view>
							<view v-if="item.type=='3'&&item.status=='10'" class="amount-state">待审核</view>
							<view v-if="item.type=='3'&&item.status=='20'" class="amount-state" style="color: #1DC691;">提现成功</view>
							<view v-if="item.type=='3'&&item.status=='30'" class="amount-state">提现失败</view>
						</view> -->
                        </view>
                    </view>
                </template>
                <view style="height: 100rpx"></view>
                <!-- </scroll-view> -->
            </pullScroolView>
        </view>
    </view>
</template>

<script setup lang="tsx"  name="transaction">
import { ref } from "vue";

import { getConsumption } from "@/api/api";
import { userData as userDataStore } from "@/store/userData";
import { onLoad,onPageScroll } from "@dcloudio/uni-app";
import moment from "moment";
import { centToYuan } from "@/utils/format";
import { systemInfo as systemInfoStore } from "@/store/systemInfo";
const systemInfo: any = systemInfoStore();

onPageScroll((res) => {
    const scrollTop = res.scrollTop;
    console.log('scrollTop')
    console.log(scrollTop)
    if(res.scrollTop===0){
        backTop();
        setTimeout(()=>{
            uni.pageScrollTo({scrollTop:100});
        },100)
    }
});

const backTop = ()=>{
    scroll.value.onBackTop();
}

const goBack = () => {
    uni.navigateBack();
};
let scrollTop = ref(0);
const goTransactionDetail = (index: number) => {
    let params = JSON.stringify(transactionData.value.list[index]);
    //console.log(param)
    uni.navigateTo({
        url: `/pages/transactionDetail/transactionDetail?params=` + params,
        //data:{params:params}
    });
};

const scroll = ref(null);

const userData: any = userDataStore();
let triggered = ref(false);
let _freshing = ref(false);
//数据查询条件
let params = {
    //userId:userData.id,
    userId: userData.id,
    page: 1,
    rows: 15,
};
let transactionData: any = ref({});
//下拉刷新数据
const isPositive = (type:any) =>{
    if(Number(type)===3){
        return true
    }
    return false
}

const refresh = () => {
    if (_freshing.value) return;
    _freshing.value = true;
    triggered.value = true;
    if (!triggered.value) triggered.value = true; //界面下拉触发，triggered可能不是true，要设为true
    params.page = 1; //设置刷新时查询第一页
    getConsumption(params).then((res: any) => {
        // console.log("getConsumption");
        // console.log("getConsumption");
        // console.log("getConsumption");
        // console.log(res);

        params.page++; //设置下一页
        transactionData.value = res.data;
        triggered.value = false; //触发onRestore，并关闭刷新图标
        _freshing.value = false;
        // console.log("transactionData.value");
        // console.log(transactionData.value);
        // console.log("res");
        // console.log(res);
        setTimeout(() => {
            scroll.value.success();
        }, 500);
    });
    //triggered.value = false;
};
const scrolltolower = () => {
    if (params.page >= transactionData.value.pages) return;
    getConsumption(params).then((res: any) => {
        params.page++; //设置下一页
        transactionData.value.list.push(...res.data.list);
    });
};
//页面加载完成后加载初始数据
onLoad(() => {
    setTimeout(() =>{
        uni.pageScrollTo({scrollTop:100});
    },100)
    _freshing.value = false;
    refresh();
});
const transactionImg: any = ref([
    "../../static/image/income.png", //入账图标
    "../../static/image/expenditure.png", //退款图标
    //"../../static/image/expenditure.png"////提现图标
]);
const withdrawType: any = ref(["微信", "支付宝"]);
//根据日期字符串获取月份
const getMonthByStr = (dateTimeString: string) => {
    const date = new Date(dateTimeString);
    const monthNumber = date.getMonth() + 1;
    return monthNumber;
};
//判断是否为当月第一条数据（页面第一条加圆角用）
const isFirst = (index: number) => {
    if (index == 0) return true;
    if (
        getMonthByStr(transactionData.value.list[index].createTime) !=
        getMonthByStr(transactionData.value.list[index - 1].createTime)
    )
        return true;
    return false;
};
//判断是否为当月最后一条数据或页面最后一条（页面最后加圆角用）
const isFinal = (index: number) => {
    if (index >= transactionData.value.list.length - 1) return true;
    if (
        getMonthByStr(transactionData.value.list[index].createTime) !=
        getMonthByStr(transactionData.value.list[index + 1].createTime)
    )
        return true;
};
//获取行圆角样式
const getborderRadiusCss = (index: number) => {
    let css = "border-radius: 0 0 0 0;";
    if (isFirst(index) && isFinal(index)) {
        css = "border-radius: 10rpx 10rpx 10rpx 10rpx;"; //是月首行与尾行4个圆角
    }
    if (isFirst(index) && !isFinal(index)) {
        css = "border-radius: 10rpx 10rpx 0 0;"; //是月首行与不是尾行上面2个圆角
    }
    if (!isFirst(index) && isFinal(index)) {
        css = "border-radius: 0 0 10rpx 10rpx;"; //不是月首行与是尾行下面2个圆角
    }
    return css;
};
</script>

<style lang="scss" scoped>
@import "./transaction.scss";
.body-view1{
    width: 750rpx;
    height: calc(100vh + 1px);
    background:#f5f5f5;
}

.content1{
	position:fixed;
    width:750rpx;
    left:0;
    right:0;
    bottom:0px;
    .scroll{
        width:750rpx;
        top:0;
        left:0;
        right:0;
        bottom:0;
    }
}
</style>
